<template>
  <div>
         <van-empty description="您还未加入任何东西哦！" v-show="showAdd">
          <van-button round type="danger" class="bottom-button" @click="addgoods">加入购物车</van-button>
        </van-empty>
      <ul>
        <li v-for = "goods in goodslist" :key="goods.cartid"  >
          {{msg}}
          <van-swipe-cell class="cell">
            <input type="checkbox" class="fuxuan" :checked="goods.flag" @click="danchoice(goods.cartid,goods.flag)">
            <van-card
            :price="goods.originprice"
            :title="goods.proname"
            :thumb="goods.img1"
            class="goods-card"
            >
            <template #num>
              <van-stepper  theme="round" button-size="22" disable-input  :value='goods.num' @plus="add(goods.cartid,goods.num)" @minus='jianshao(goods.cartid,goods.num)'/>
             </template>
           </van-card>
            <template #right >
              <van-button square text="删除" type="danger" @click="deletegoods(goods.cartid)" class="dle"/>
            </template>
        </van-swipe-cell>
        </li>
      </ul>
      </div>
   </template>
<script>
import axios from 'axios'
import { Dialog } from 'vant';
export default {
 name:"Shopingcart-vue",
 data(){
    return {
      goodslist:[],
      showAdd:false,
      value:true,
      msg:""
    }
 },
 created(){
  this.render()
 },
 methods:{
  add(id,shuliang) {
     axios.post("/api/cart/updatenum",`cartid=${id}&num=${++shuliang}`)
     this.$nextTick(()=>{
      this.render()
     })
    },
     jianshao(id,shuliang){
     axios.post("/api/cart/updatenum",`cartid=${id}&num=${--shuliang}`)
     this.$nextTick(()=>{
      this.render()
     })
    },
  danchoice(id,choice){
    let key = !choice
    axios.post("/api/cart/selectone",`cartid=${id}&flag=${key}`)
     this.$nextTick(()=>{
       this.render()
     })
    },
    render(){
      axios.post("/api/cart/list",`userid=${localStorage.getItem("userid")}`)
          .then(req=>{
            if(req.data.code==200){
              this.goodslist = req.data.data
              console.log('this.goodslist: ', this.goodslist);
              // 重新获取新的数据
              this.$nextTick(()=>{
                axios.post("/api/cart/list",`userid=${localStorage.getItem("userid")}`)
                .then(res=>{
                if(res.data.code == 200){
                  let bool = res.data.data.every(item=>item.flag)
                  this.$parent.checked = bool;
                  let arr = []
                  arr = res.data.data.filter(res=>res.flag)
                  this.$store.commit("changebuy",arr)
                  let sum = 0;
                  if(arr.length){
                    for(var i = 0;i<arr.length;i++){
                    sum += arr[i].num *arr[i].originprice;
                  } 
                }
                this.$parent.name = sum
                }
                })
              })
            }else if(req.data.code == 10020){
              this.goodslist = []
            }
      })
    },
    deletegoods(n){
        Dialog.confirm({
        title: '确认删除吗?',
      })
      .then(() => {
      axios.post("/api/cart/remove",`cartid=${n}`)
      .then(res=>{
        if(res.data.code == 200){
          this.$nextTick(()=>{
            console.log(111);
            this.render()
          })
        }
      })
      })
      .catch(() => {
        this.$nextTick(()=>{
         
        })
      });
    },
    addgoods(){
      this.$router.push("/category")
    }
 },
 updated(){
  if(this.goodslist.length == 0){
          this.showAdd = true
      }
 }
}

</script>

<style scoped>
.goods-card {
    margin: 0;
    background-color: white;
    width:90%;
    float: right;
  }
.fuxuan {
    float: left;
    margin-top: 1rem;
    margin-left: 1rem;
  }

li{
    background-color: #fff;
    border: 1px solid #efefef;
  }

  .dle{
  height: 104px;
 }
 .bottom-button {
    width: 160px;
    height: 40px;
  }
 
</style>
